@import '~static/sass/var'
@import '~static/sass/color'
@import '~static/sass/mixin'

$iconSize: 30px

#nav
  width: 100%
  height: $navHeight
  background-color: $grey-100
  +font-dpr(10px)
  +border-box
  border-top: 1px solid $grey-400
  display: flex
  display: -webkit-flex
  display: -webkit-box
  display: -ms-flexbox
  text-align: center
  font-size: 0
  position: absolute
  bottom: 0
  left: 0

  > *
    height: 100%
    font-size: 1.2em
    color: #565656
    display: block
    flex: 1
    -webkit-flex: 1
    -webkit-box-flex: 1
    -ms-flex: 1
    display: flex
    display: -webkit-flex
    display: -webkit-box
    display: -ms-flexbox
    -webkit-box-orient: vertical
    -webkit-box-direction: normal
    -ms-flex-direction: column
    flex-direction: column
    -webkit-box-pack: center
    -ms-flex-pack: center
    justify-content: center
    text-decoration: none

    > div
      +size-dpr($iconSize, width, height)
      margin: auto

      img
        width: 100%
        height: 100%

  .nuxt-link-exact-active
    color: #5AACA5
